<div class="assess">
<div class="assess-container">
<header>
<div class="time-choose">
<div class="time-spans">
<span class="time">
            <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">年度</span>
<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">月度</span>
</span>
<span>
<span>选择时间：</span>
<span *ngIf="true">   
<select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
<option [value]="year" *ngFor="let year of years" > {{year}} </option>               
</select>
年
</span>
<span *ngIf="active==1">   
<select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
<option [value]="month" *ngFor="let month of months" > {{month}}</option>               
</select>
月
</span>
</span>
<span>
<button class="button-trend" (click)="onSearch(active)">确定</button>
</span>
</div>
</div>

<div class="turbine">
<div class="title" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave($event)">
{{currentDevice?.farmName}} {{currentDevice?.deviceName}}
<span></span>
<div class="turbine-selector-show" [hidden]="!showSelector">

<app-device-selector 
class="detail-select" 
[multipleDevice]="false" 
[display]="true"  
[deviceCategories]="deviceCategory" 
(selectedDevicesChange)="onSelectFarmRadio($event)">
</app-device-selector> 
</div>
</div>
</div>
</header>

<div class="main" >
<div [ngClass]="{'main-content':true, active:active==0}">
<section class="pie-chart">
<div class="title-p">
<!--标题  -->
<p>{{ currentYear }}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组发电能力评估</p>
</div>

<div class="chart-tab">
<div class="chart">
<app-assess-pie-echart [active]="active" [series]="yearPieSeries"></app-assess-pie-echart>
</div>
<div class="tab">
<div class="center">
<table>
<tr style="color:#22b14c;">
<td>实发电量</td>
<td>{{ actualPowerTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#a349a4;">
<td>性能损失电量</td>
<td>{{ performLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#ff7f27;">
<td>停机损失电量</td>
<td>{{ stopLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#00a2e8;">
<td>限电损失电量</td>
<td>{{ limitLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#FF0000;">
<td>坏点损失电量</td>
<td>{{ badLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#fff;">
<td>能量利用率</td>
<td>{{ usePercentTotal | number:'1.1-2' }}%</td>
</tr>
</table>
</div>

<div class="data-count-pie">
<p>{{currentYear}}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组发电能力：<span>{{ powerJudge }}</span></p>
<p>影响发电能力最主要的因素是：<span>{{ powerLossReason }}</span></p>
</div>
</div>
</div>

</section>

<section class="column-chart">
<div class="title-p">
<p>{{ currentYear }}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组各月发电能力评估</p>
</div>

<div class="column-tab">
<div class="chart-col">
<app-assess-column-echart [xAxisData]="xAxisData" [series]="yearColumnSeries"></app-assess-column-echart>
</div>
<div class="data-count-column">
<p>{{currentYear}}年发电能力较好的月份是：<span *ngFor="let item of monthsPowerCapacity">{{ item?.date }}，</span></p>
<div>
<p>发电能力较差的月份是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>月份</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of powerLossReasonMonth; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>

<div class="main-content" [ngClass]="{'main-content':true, active:active==1}">
<section class="pie-chart">
<div class="title-p">
<!--标题  -->
<p>{{ currentYear }}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组{{ currentMonth }}月发电能力评估</p>
</div>
<div class="chart-tab">
<div class="chart">
<app-assess-pie-echart [active]="active" [series]="monthPieSeries"></app-assess-pie-echart>
</div>

<div class="tab">
<div class="center">
<table>
<tr style="color:#22b14c;">
<td>实发电量</td>
<td>{{ monthActualPowerTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#a349a4;">
<td>性能损失电量</td>
<td>{{ monthPerformLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#ff7f27;">
<td>停机损失电量</td>
<td>{{ monthStopLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#00a2e8;">
<td>限电损失电量</td>
<td>{{ monthLimitLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#FF0000;">
<td>坏点损失电量</td>
<td>{{ monthBadLossTotal | number:'1.1-2'}}万kWh</td>
</tr>
<tr style="color:#fff;">
<td>能量利用率</td>
<td>{{ monthUsePercentTotal | number:'1.1-2' }}%</td>
</tr>
</table>
</div>

<div class="data-count-pie">
<p>{{currentYear}}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组{{ currentMonth }}月发电能力：<span>{{ powerJudgeMonth }}</span></p>
<p>影响{{currentDevice?.deviceName}}机组发电能力最主要的因素是：<span>{{ powerLossReasonDate }}</span></p>
</div>
</div>
</div>
</section>

<section class="column-chart">
<div class="title-p">
<!--标题  -->
<p>{{ currentYear }}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组{{ currentMonth }}月发电能力评估</p>
</div>

<div class="column-tab" >
<div class="chart-col">
<app-assess-column-echart [xAxisData]="xAxisDataMonth" [series]="monthColumnSeries"></app-assess-column-echart>
</div>
<div class="data-count-column">
<p>{{currentYear}}年{{ currentDevice?.farmName }}风场{{currentDevice?.deviceName}}机组{{ currentMonth }}月发电能力较好的日期是：<span *ngFor="let item of daysPowerCapacity">{{ item?.date }}，</span></p>
<div>
<p>发电能力较差的日期是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>机组</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of powerLossReasonDay; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</div> 
</div>